<template>
  <div class="app-container">
    <el-row :gutter="10" type="flex" style="height: 98%">
      <el-col :span="24">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-search" size="mini" @click="handleSearch">
              查询
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              :loading="exportLoading"
              @click="handleExport('A')"
              v-hasPermi="['money:moeProcessProfit:export']">
              导出明细
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              :loading="exportLoading"
              @click="handleExport('B')"
              v-hasPermi="['money:moeProcessProfit:export']">
              导出统计
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExportStandbyOrderInformation"
              v-hasPermi="['money:standbyOrderInformation:export']">
              导出备库订单盈亏
            </el-button>
          </el-col>
          <Tag type="dot" size="default" color="#3399ff">审核</Tag>
          <Tag type="dot" size="default" color="#bb0331">结案</Tag>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-tabs v-model="activeTab">
          <el-tab-pane label="详细数据" name="first">
            <el-table
              border
              stripe
              height="600px"
              id="inOutDetail"
              @scrollBottom="load1"
              :data="somDetailList"
              :header-cell-style="{ 'text-align': 'center' }">
              <el-table-column label="#" type="index"  align="center" fixed="left" />
              <el-table-column label="销售单号" align="center"  prop="molSodh" />
              <el-table-column label="物料代码" align="center"  prop="molWldm" />
              <el-table-column label="品名规格" align="center"  prop="itmPmgg" />
              <el-table-column label="产品数量" align="center"  prop="molNumber" />
              <el-table-column label="物料代码" align="center"  prop="molWldm" />
              <el-table-column label="BOM折算费用" align="center"  prop="molBomMoney" />
              <el-table-column label="加工费" align="center"  prop="molProcessMoney" />
              <el-table-column label="出货产品售价" align="center"  prop="molSellMoney" />
              <el-table-column label="订单盈亏" align="center"  prop="molTotalMoney" />
            </el-table>

          </el-tab-pane>
          <el-tab-pane label="备库订单盈亏" name="second">
            <el-table
              border
              stripe
              height="600px"
              :data="somKcDetailList.slice((currentPage - 1) * pageSize,currentPage *pageSize)"
              :header-cell-style="{ 'text-align': 'center' }">
              <el-table-column label="#" type="index"  align="center" fixed="left" />
              <el-table-column label="销售单号" align="center"  prop="molSodh" />
              <el-table-column label="物料代码" align="center"  prop="molWldm" />
              <el-table-column label="品名规格" align="center"  prop="itmPmgg" />
              <el-table-column label="BOM折算费用" align="center"  prop="molBomMoney" />
              <el-table-column label="加工费" align="center"  prop="molProcessMoney" />
              <el-table-column label="产品入库数量" align="center"  prop="molNumber" />
              <el-table-column label="月利息" align="center"  prop="molInterest" />
              <el-table-column label="生产部盈亏" align="center"  prop="molProduceMoney" />
              <el-table-column label="订单盈亏" align="center"  prop="molTotalMoney" />
            </el-table>

            <div>
              <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="total,prev,pager,next"
                :total="somKcDetailList.length" >
              </el-pagination>
            </div>

          </el-tab-pane>

          <el-tab-pane label="月度汇总" name="third">
            <el-table border stripe id="SomTotal" :data="somTotalList" @scrollBottom="load2" height="600px" >
              <el-table-column label="物料代码" align="center"  prop="molWldm" />
              <el-table-column label="品名规格" align="center"  prop="itmPmgg" />
              <el-table-column label="月度订单数量" align="center" prop="molNumber"  />
              <el-table-column label="超发数量" align="center" prop="molCfsl"  />
              <el-table-column label="成品售价" align="center" prop="molSellMoney"  />
              <el-table-column label="加工费" align="center" prop="molProcessMoney"  />
              <el-table-column label="BOM折算费" align="center" prop="molBomMoney"  />
              <el-table-column label="订单盈亏" align="center" prop="molTotalMoney"  />
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <!-- 查询对话框   -->
        <el-dialog :title="title" v-model="openSearch" :close-on-click-modal="false" draggable width="780px"
                   append-to-body>
          <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
            <el-col :span="12">
              <el-form-item label="排程日期" prop="dateRange">
                <el-date-picker
                  clearable
                  size="small"
                  v-model="dateRange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="width: 250px"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="销售单号" prop="moeSodh">
                <el-input v-model="queryParams.moeSodh" placeholder="请输入销售单号" clearable size="small" style="width: 250px"
                          @keyup.enter.native="handleQuery"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="itmPmgg" label-width="95px">
                <span slot="label">
                  <el-tooltip content="综合查询包含物料代码，品名规格，客户编码查询" placement="top">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                  综合查询
                </span>
                <el-input
                  v-model="queryParams.itmPmgg"
                  clearable
                  size="small"
                  type="textarea"
                  style="width: 450px"
                  @keyup.enter.native="handleQuery"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item style="margin-top: 25px; display: flex; justify-content: flex-end">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="handleQuery">确认</el-button>
              </el-form-item>
            </el-col>
          </el-form>
        </el-dialog>

      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  exportMoeDet,
  listMoeDetJt, listMarketingProfit, listKcMarketingProfit, marketingProfitExport, exportStandbyOrderInformation
} from '@/api/produce/moeDet'


export default {
  name: 'MarketingProfit',
  data() {
    return {
      // 遮罩层
      loading: true,
      // 首选项
      activeTab: 'first',
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      openSearch: false,
      // 工单表格数据
      somDetailList: [],
      somTotalList: [],
      somKcDetailList:[],
      currentPage: 1,
      pageSize : 20,
      // 总条数
      total1: 0,
      total2: 0,
      // 日期范围
      dateRange: [new Date(new Date().getTime() - 3600 * 1000 * 24 * 60), new Date(new Date().getTime() + 3600 * 1000 * 24 * 3650)],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 30,
        moeSodh: null,
        itmPmgg: null
      },
      // 表单参数
      form: {},
      // 部门树选项
      deptOptions: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询工单列表 */
    getList() {
      this.loading = true
      this.queryParams.params = {}
      if (this.dateRange !== null) {
        this.queryParams.params['beginDate'] = this.moment(this.dateRange[0]).format('YYYY-MM-DD HH:mm:ss')
        this.queryParams.params['endDate'] = this.moment(this.dateRange[1]).format('YYYY-MM-DD HH:mm:ss')
        this.queryParams.beginTime = this.moment(this.dateRange[0]).format('YYYY-MM-DD HH:mm:ss')
        this.queryParams.endTime= this.moment(this.dateRange[1]).format('YYYY-MM-DD HH:mm:ss')
      }
      this.queryParams.pageNum = 1
      listMarketingProfit(this.queryParams).then((response) => {
        this.somDetailList =[]
        this.somDetailList = response.data.SomDetail.rows
        this.total1 = response.data.SomDetail.total

        this.somTotalList = []
        this.somTotalList = response.data.SomMonthTotal.rows
        this.total2 = response.data.SomMonthTotal.total
        this.loading = false
      })
      listKcMarketingProfit(this.queryParams).then(res =>{
        this.somKcDetailList = res.data.data;
      });




    },
    //load
    load1() {
      if (this.queryParams.pageNum < Math.ceil(this.total1 / this.queryParams.pageSize)) {
        this.queryParams.pageNum++
        listMarketingProfit(this.queryParams).then((response) => {
          this.somDetailList = this.somDetailList.concat(response.data.SomDetail.rows)
          this.total1 = response.data.SomDetail.total
          this.loading = false
        })
      }
      return 0
    },
    //load
    load2() {
      if (this.queryParams.pageNum < Math.ceil(this.total2 / this.queryParams.pageSize)) {
        this.queryParams.pageNum++
        listMarketingProfit(this.queryParams).then((response) => {
          this.somTotalList = this.somTotalList.concat(response.data.SomMonthTotal.rows)
          this.total2 = response.data.SomMonthTotal.total
          this.loading = false
        })
      }
      return 0
    },

    handleCurrentChange(val){
      this.currentPage = val;
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.openSearch = false
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
      this.openSearch = false
    },
    handleSearch() {
      this.title = '查询工单'
      this.openSearch = true
    },

    /** 导出按钮操作 */
    handleExport(type) {
      let queryParams = this.queryParams
      queryParams.params.flag = type
      this.$confirm('是否确认导出数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.exportLoading = true
          return marketingProfitExport(queryParams)
        })
        .then((response) => {
          this.download(response.msg)
          this.exportLoading = false
        })
        .catch(() => {
        })
    },
    handleExportStandbyOrderInformation(){
      let queryParams = this.queryParams
      this.$confirm('是否确认导出数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.exportLoading = true
          return exportStandbyOrderInformation(queryParams)
        })
        .then((response) => {
          this.download(response.msg)
          this.exportLoading = false
        })
        .catch(() => {
        })
    }
  },
}
</script>

<style lang="scss" scoped></style>
